<template>
    <div>
        <!--新增按钮位置-->
        <div style="position:fixed;z-index:100;width:100%">
            <div role="button" tabindex="0" @click="addOne"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"
                style="position:fixed;width:50%;">
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加新资源</div><i
                    class="van-icon van-icon-arrow van-cell__right-icon">
                </i>
            </div>
            <div style="position:fixed;width:50%;left:50%;padding: 2px;" class="van-cell--borderless van-contact-card">
                <van-dropdown-menu title="班级选择">
                    <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
                </van-dropdown-menu>
            </div>
        </div>
        <!--列表展示位置-->
        <div v-show="show == 0">
            <div style="height: 73px"></div>
            <div role="button" tabindex="0" index="0" v-for="(item, index) in resources" :item="item"
                @click="intoDelResources(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>资源名称：{{ item.name }}</div>
                    <div>资源类型：{{ item.resourceType == 0 ? '文件' : '链接' }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div style="height: 73px"></div>
        </div>
        <!--单个添加信息-->
        <div v-show="show == 1">
            <div style="height: 73px"></div>
            <van-form @submit="addResources">
                <van-field v-model="name" name="name" label="资源名称" :rules="[{ required: true, message: '请填写资源名称' }]" />

                <van-field readonly clickable name="resourceType" :value="tempTyep" label="资源类型" placeholder="点击选择资源类型"
                    @click="showPicker = true" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>

                <div v-show="resourceType == 1">
                    <van-field v-model="resourceUrl" name="resourceUrl" label="资源链接" />
                </div>
                <div v-show="resourceType == 0">
                    <van-field name="uploader" label="文件上传">
                        <template #input>
                            <van-uploader v-model="uploader" :max-count="1" accept="*.*" />
                        </template>
                    </van-field>
                </div>

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交资源信息</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="primary" @click="back">返回列表</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import req from '../../request/index'
import {UploadFile} from '../../request/FileHttpRequestUtil'
export default {
    name: '',
    data() {
        return {
            show: 0,
            classInfos: [],
            classId: '',
            className: '',
            resources: [],
            name: '',

            tempTyep: '',
            resourceType: 3,
            columns: ['文件', '链接'],
            showPicker: false,
            resourceUrl: '',
            uploader:[]
        };
    },
    methods: {
        back() {
            this.show = 0;
            this.getResourcesList()
        },
        addResources(values) {
            console.log(values)
            var that = this;
            var formData = new FormData();
            formData.append("name",this.name);
            formData.append("resourceType",this.resourceType);
            formData.append("relationClassId",this.classId);
            formData.append("relationTeacherId",this.$store.state.user.id);
            if(this.resourceType == 0){
                formData.append("file",values.uploader[0].file);
            }else{
                formData.append("resourceUrl",this.resourceUrl);
            }
            UploadFile('/api/addResource',formData,function(e){
                console.log(e)
                that.back();
            })
        },
        onConfirm(value) {
            this.tempTyep = value;
            this.resourceType = value == "文件" ? 0 : 1;
            this.showPicker = false;
        },
        getResourcesList() {
            req({
                url: "getResourcesList",
                method: "post",
                data: {
                    relationClassId: this.classId,
                    relationTeacherId: this.$store.state.user.id
                }
            }).then(res => {
                this.resources = res.data.data
            }).catch(err => {
                console.log(err);
            })
        },
        intoDelResources(resource) {
            this.$dialog.confirm({
                title: '删除模块',
                message: '删除该资源：' + resource.name,
            }).then(() => {
                req({
                    url: "delResource",
                    method: "post",
                    data: {
                        id:resource.id,
                        resourceType:resource.resourceType,
                        resourceUrl:resource.resourceUrl
                    }
                }).then(res => {
                    console.log(res);
                    this.back()
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                // on cancel
            });
        },
        addOne() {
            this.show = 1;
            this.name = '';
            this.resourceType = 3;
            this.resourceUrl = '';
            this.uploader = [];
        },
        changeClass(res) {
            //根据班级id获取当前的所有任务信息
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.className = this.classInfos[i].text;
                    this.getResourcesList()
                }
            }
        },
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    //根据班级id获取当前的所有资源信息
                    this.getResourcesList()
                }
            }).catch(err => {
                console.log(err);
            })
        },
    },
    computed: {
    },
    mounted() {
        //发送请求 获取该用户的所有班级信息
        this.getClassInfo();
    },
}
</script>
<style>
.van-dropdown-menu__bar {
    height: 68px;
}
</style>